<!doctype html>
<html>
<head>
    <title>Conditional styling</title>
    <meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

    <script src="../../codebase/webix/webix.js" type="text/javascript"></script>
    <script src="../../codebase/spreadsheet.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="../../codebase/webix/webix.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/spreadsheet.css">

    <script src="../common/data.js"></script>
    <style>
        .custom_bold {
            font-weight: bold;
        }
        .custom_italic {
            font-style: italic;
        }
        .custom_color {
            color: red
        }
        .custom_bgcolor {
            background: #f9cb9c;
        }
        .custom_less {
            color: #ffe599;
            background: #6aa84f;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    webix.ready(function(){
        var data = math_data_simple;

        // conditions in datasource
        data.conditions = [
            [3,6,">",100,"custom_bgcolor"],
            [3,7,"<",1000,"custom_less"]
        ];

        webix.ui({
            id: "ssheet",
            view:"spreadsheet",
            data: data,
            toolbar: "full",
            conditionStyle:[
                {name: 'bold', css: "custom_bold"},
                {name: 'italic', css: "custom_italic"},
                {name: 'red', css: "custom_color"},
                {name: 'highlight', css: "custom_bgcolor"},
                {name: 'green', css: "custom_less"}
            ]

        });
    });
</script>
</body>
</html>